今回紹介するテクニックでは、初めに画像をモノクロで表示させておく必要があります。これは、各画像に「gray()」のフィルターを適用すると実現できます。まずは、以下のようにスタイルシートを記述し、各画像に「gray()」のフィルターを適用してください。ただし、「gray()」はInternet Explore専用のフィルターであることに注意してください。Netscapeは「gray()」のフィルターに対応していないため、全ての画像が初めからカラーで表示されます。 <IMG src="photo01.jpg" style="filter:gray()">

	続いて、マウスの動きにあわせて画像の色を変更できるように、各画像にonMouseover、onMouseoutイベントを追加します。画像の上にマウスが来たときは、画像をカラーに変更するJavaScript関数「iro()」をonMouseoverイベントで呼び出します。逆に、マウスが画像の外に出た場合は、画像をモノクロに戻すJavaScript関数「mono()」を呼び出します。なお、いずれの場合も、画像自信のオブジェクト（this）を引数として関数に受け渡します。 <IMG src="photo01.jpg" style="filter:gray()" onMouseover="iro(this)" onMouseout="mono(this)">

	最後に、JavaScript関数「iro()」「mono()」を作成すればテクニックは完成です。「iro()」の関数では、「gray()」のフィルターを無効にすることにより、画像をカラー表示させます。逆に「mono()」の関数では、「gray()」のフィルターを再び有効にすることで、画像をモノクロ表示に戻しています。 <SCRIPT language="JavaScript"> <!-- function iro(image){ image.filters["gray"].enabled = false; } function mono(image){ image.filters["gray"].enabled = true; } // --> </SCRIPT>

PC�p�����y�����l���g�����������}�W�������������z �����������O�~�y�������������z Yahoo �y�V NTT-X Store

�����z�[���y�[�W �������N���W�b�g�J�[�h �C�O�i���q���� ���������[�� �C�O���s�����������I �C�O�z�e��